<template>
  <div id="app">
    <transition
      :name="direction"
      mode="out-in"
    >
      <!--动态获得transition 的name值-->
      <router-view
        class="app-view"
        wechat-title
      ></router-view>
    </transition>
  </div>
</template>

<script>
import Layout from "@/views/layout";
export default {
  name: "app",
  components: {
    "v-layout": Layout
  },
  data() {
    return {
      transitionName: ""
    };
  },
  computed: {
    direction() {
      const viewDir = this.$store.state.viewDirection;
      let tranName = "";

      // if (viewDir === "left") {
      //   tranName = "view-out";
      // } else if (viewDir === "right") {
      //   tranName = "view-in";
      // } else {
      //   tranName = "fade";
      // }

      return tranName;
    }
  }
  // watch: {
  //   $route(to, from) {
  //     //如果to索引大于from索引,判断为前进状态,反之则为后退状态
  //     if (to.meta.index > from.meta.index) {
  //       //设置动画名称
  //       this.transitionName = "slide-left";
  //     } else {
  //       this.transitionName = "slide-right";
  //     }
  //   }
  // }
};
</script>

<style lang="scss">
//动画效果
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.view-in-enter-active,
.view-out-leave-active {
  position: absolute;
  top: 0;
  width: 100%;
  // padding-top: px2rem($titbarHeight);
  padding-top: 48px;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.view-in-enter-active {
  -webkit-animation-name: inRight;
  animation-name: inRight;
}

.view-out-leave-active {
  -webkit-animation-name: outLeft;
  animation-name: outLeft;
}

html,
body {
  height: 100%;
  min-width: 320px;
  max-width: 640px;
}
// .slide-right-enter-active,
// .slide-right-leave-active,
// .slide-left-enter-active,
// .slide-left-leave-active {
//   will-change: transform;
//   transition: all 400ms;
//   position: absolute;
// }
// .slide-right-enter {
//   opacity: 0.8;
//   transform: translate3d(-375px, 0, 0);
// }
// .slide-right-leave-active {
//   opacity: 0.3;
//   transform: translate3d(375px, 0, 0);
// }
// .slide-left-enter {
//   opacity: 0.8;
//   transform: translate3d(375px, 0, 0);
// }
// .slide-left-leave-active {
//   opacity: 0.3;
//   transform: translate3d(-375px, 0, 0);
// }
#app {

  height: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  display: -webkit-box;
  // overflow-x: hidden;
  //pointer-events: none; //这句话会导致整个页面上的点击事件失效，如需绑定点击事件，请注掉
  // -webkit-transform: translate3d(0, 0, 0);
  // backface-visibility: hidden;
  position: relative;
  .icon-icon- {
    color: #fff;
  }
}
a {
  text-decoration: none;
  color: #000;
}
</style>
